<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<view class="portrait-box">
				<image class="portrait" :src="imageSrc || patient.avatar || '/static/missing-face.png'" @click="chooseImage"></image>
			</view>
		</view>
		<view class="info-box">
			<view class="userTitle">
				<h1 style="font-size: 25px;">个人信息</h1>
			</view>
			<uni-forms ref="userForm" :modelValue="patient">
				<uni-forms-item label="身份证" required>
					<uni-easyinput v-model="patient.idCard" placeholder="请输入身份证" />
				</uni-forms-item>
				<uni-forms-item label="姓名" required>
					<uni-easyinput v-model="patient.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="生日">
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="patient.birthday"
						placeholder="请选择生日" />
				</uni-forms-item>
				<uni-forms-item label="性别" required>
					<uni-data-checkbox v-model="patient.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="电话" required>
					<uni-easyinput v-model="patient.phone" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item label="地址">
					<uni-easyinput type="textarea" v-model="patient.address" placeholder="请输入地址" />
				</uni-forms-item>
				<view>
					<button class="btn" @click="onsubmit">提交</button>
					<button class="btn" @click="onreset">重置</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		update
	} from '../../api/patient/index.js'
	export default {
		data() {
			return {
				imageSrc: '',
				patient: uni.getStorageSync('patient'),
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}, {
					text: '未知',
					value: 0
				}],
			};
		},
		async onLoad() {
			this.getGener();
		},
		methods: {
			chooseImage: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中'
						})
						this.task = uni.uploadFile({
							url: 'http://localhost:9999/youlai-system/api/v1/files', //仅为示例，非真实的接口地址
							filePath: imageSrc,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								console.log('uploadImage success, res is:', res.data)
								console.log(imageSrc);
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								})
								this.imageSrc = imageSrc
								this.patient.avatar = JSON.parse(res.data).data.url
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							},
							complete: (res) => {
								uni.hideLoading();
								this.task = null
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			onsubmit: function() {
				uni.showModal({
						title: '提示',
						content: '确定要修改吗？',
						success: (res) => {
							if (res.confirm) {
								update(this.patient).then(res => {
										if (res.data == null) {
											if (res.data == null) {
												uni.showToast({
													title: '修改成功',
													icon: 'success',
													duration: 1000
												})
												setTimeout(() => {
													this.imageSrc = ''
													uni.navigateTo({
														url: `/pages/login/login`
													})
												}, 500)
											}
										}
									})
								} else if (res.cancel) {
									uni.showToast({
										title: '取消修改',
										icon: 'none',
										duration: 1000
									})
								}
							},
						})
					},
					onreset: function() {
						this.patient = uni.getStorageSync('patient')
						this.patient.sex = Number(this.patient.sex)
						this.imageSrc = ''
						uni.showToast({
							title: '重置成功',
							icon: 'success',
							duration: 1000
						})
					},
					getGener: function() {
						this.patient.sex = Number(this.patient.sex);
					}
			}
		}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.userImg {
		height: 20px;
		width: 20px;
		margin-top: 15px;
		margin-left: 10px
	}

	.btn {
		margin: 10px 8px;
		padding: 8px 16px;
		border-radius: 20px;
		background-color: #67C23A;
		color: white;
		border: none;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		transition: all 0.3s;
		font-size: 14px;
		
		&:active {
			transform: scale(0.95);
			box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		}
		
		&:hover {
			background-color: darken(#67C23A, 10%);
			box-shadow: 0 4px 8px rgba(0,0,0,0.15);
		}
	}

	.item {
		border-bottom: 1px solid #E5E5E5;
		height: 50px;
		margin-top: 10px;
	}

	.username {
		font-size: 16px;
		display: inline-block;
		margin-left: 10px;
		margin-top: 10px;
	}

	.userTitle {
		margin: 25px 0;
		text-align: center;
		color: #67C23A;
		font-weight: bold;
		font-size: 28px;
		text-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.logo {
		height: 20px;
		width: 20px;
		margin-top: 10px;
		margin-left: 10px;
	}

	.image {
		width: 100%;
	}

	.demo {
		background: #fff;
		padding: 25px;
		justify-content: center;
		align-items: center;
	}

	.uni-hello-addfile {
		text-align: center;
		background: #fff;
		padding: 25px;
		margin-top: 10px;
		font-size: 19px;
		color: #808080;
	}

	.info-box {
		height: 100%;
		margin: 20px;
		padding: 20px;
		background-color: #fff;
		border-radius: 15px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		transition: all 0.3s ease;
		
	}

	.user-section {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 460upx;
		padding: 40upx 30upx 0;
		position: relative;
		
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(2px);
			opacity: .4;
			transition: all 0.5s ease;
		}

		.portrait-box {
			width: 300upx;
			height: 300upx;
			border: 8upx solid rgba(255,255,255,0.9);
			border-radius: 50%;
			position: relative;
			z-index: 2;
			box-shadow: 0 8px 25px rgba(0,0,0,0.15);
			transition: all 0.3s ease;
			
			&:hover {
				transform: scale(1.05);
				box-shadow: 0 12px 30px rgba(0,0,0,0.2);
			}
		}

		.portrait {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #f5f5f5;
			transition: all 0.3s ease;
			
			&:hover {
				filter: brightness(1.05);
			}
		}

		.yticon {
			position: absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0, 0, 0, .4);
		}

		.pt-upload-btn {
			right: 0;
			bottom: 10upx;
		}

		.bg-upload-btn {
			right: 20upx;
			bottom: 16upx;
		}
	}
</style>